<template>
  <view class="p-t13 bg-1 r-10 section overflow-hidden">
    <view class="p-a20 p-b30 flex-d-c hairline-bottom">
      <image class="avatar" :src="resume.avatar" mode="aspectFill" />
      <text class="m-t20 text-700-140">{{ resume.nickname }}</text>
      <text class="m-t30 text-400-140"
        >{{ resume.gender == 1 ? "男" : "女" }} {{ resume.age || "0" }}岁
        {{ resume.city }}</text
      >
      <view class="m-t24 w flex-sb">
        <view class="flex">
          <image
            class="icon"
            src="@/static/images/office/envelope.png"
            mode="aspectFit"
          />
          <text class="m-l8 text-400-426">{{ resume.mobile }}</text>
        </view>
        <view class="flex">
          <image
            class="icon"
            src="@/static/images/office/envelope.png"
            mode="aspectFit"
          />
          <text class="m-l8 text-400-426">{{ resume.email }}</text>
        </view>
      </view>
    </view>
    <view
      v-if="resume.educate?.length > 0"
      class="p-h20 p-v30 flex-sb hairline-bottom"
    >
      <text class="text-700-130">{{ resume.educate[0].title }}</text>
      <text class="text-400-426"
        >{{ resume.educate[0].quali }} | {{ resume.educate[0].speciality }}
        {{ resume.educate[0].enrol_time.slice(0, 4) }}-{{
          resume.educate[0].end_time.slice(0, 4)
        }}</text
      >
    </view>
    <view class="p-h20 p-v30 hairline-bottom">
      <view class="m-b20">
        <text class="text-700-130">自我描述</text>
      </view>
      <text class="text-400-326">{{ resume.content }}</text>
    </view>
    <view class="p-h20 p-v30 hairline-bottom" v-if="resume.educate?.length">
      <text class="text-700-130">教育经历</text>
      <view v-for="item in resume.educate" :key="item.id">
        <view class="m-t20">
          <text class="text-400-130">{{ item.title }}</text>
        </view>
        <view class="m-t20 flex-sb">
          <text class="text-400-328"
            >{{ item.quali }} | {{ item.speciality }}</text
          >
          <text class="text-400-328"
            >{{ item.enrol_time.slice(0, 4) }}-{{
              item.end_time.slice(0, 4)
            }}</text
          >
        </view>
      </view>
    </view>
    <view class="p-h20 p-v30 hairline-bottom" v-if="resume.job?.length">
      <text class="text-700-130">工作经历</text>
      <view v-for="item in resume.job" :key="item.id">
        <view class="m-t20">
          <text class="text-400-130">{{ item.title }}</text>
        </view>
        <view class="m-t20 flex-sb">
          <text class="text-400-328">{{ item.position }}</text>
          <text class="text-400-328"
            >{{ item.enrol_time.slice(0, 4) }}-{{
              item.end_time?.slice(0, 4) || "至今"
            }}</text
          >
        </view>
        <view class="m-t30 m-b20">
          <text class="text-400-130">工作内容描述：</text>
        </view>
        <text class="text-400-326">{{ item.content }}</text>
      </view>
    </view>
    <view class="p-h20 p-v30 hairline-bottom" v-if="resume.skill?.length">
      <text class="text-700-130">职业技能</text>
      <view v-for="item in resume.skill" :key="item.id">
        <view class="m-t20 flex-sb">
          <text class="text-400-130">{{ item.title }}</text>
          <text class="text-400-328">{{ item.gettime }}</text>
        </view>
      </view>
    </view>
    <!-- <view class="p-h20 p-v30 hairline-bottom">
      <text class="text-700-130">项目经历</text>
      <view class="m-t20">
        <text class="text-400-130">四川生个龙宝科技有限公司</text>
      </view>
      <view class="m-t20 flex-sb">
        <text class="text-400-328">UI设计师</text>
        <text class="text-400-328">2013.12-至今</text>
      </view>
      <view class="m-t30 m-b20">
        <text class="text-700-130">项目描述：</text>
      </view>
      <text class="text-400-326">工作内容填写区域...工作内容填写区域...工作内容填写区域...工作内容填写区域....</text>
    </view> -->
  </view>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
import type { TResume } from "@/types/api.d";

defineProps<{
  resume: TResume;
}>();
</script>

<style lang="scss" scoped>
.section {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 13rpx;
    background-color: $bg-color-2;
  }

  .avatar {
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
  }

  .icon {
    width: 27rpx;
    height: 27rpx;
  }
}
</style>
